Skip to content

Conversation

daveverwer
Copy link
Member

There are a few options with the matrix redesign. I wanted to combine the header with the compatibility information and have moved the platform and Swift version names inside the cells, coloured with the existing colours:

Screenshot 2025-05-22 at 17 43 55@2x

Unfortunately, it’s not very clear the difference between a pending/unknown state and a failed state for someone who is unfamiliar with the site. We could do something like this:

Screenshot 2025-05-22 at 18 01 10@2x

Alternatively, there is a version in f2945ee05e91d19fd2d004cee9d32d7bbb4d51ad that keeps the headers separated, and looks like this:

Screenshot 2025-05-22 at 18 14 11@2x

Unfortunately, that takes up significantly more vertical space, especially when compatibility does not match between versions. While it’s nice and clear, it pushes the README way too far down.

Screenshot 2025-05-22 at 18 13 17@2x

Other Improvements

This redesign also changes how we label the versions above the matrices. They’re now separated with a “/” instead of a sentence and it copes with extremely long tag names by truncating the longest tag when they don’t fit on one line:

Screenshot 2025-05-22 at 19 38 16@2x

@daveverwer daveverwer requested a review from finestructure May 22, 2025 18:43
@daveverwer daveverwer marked this pull request as draft May 22, 2025 18:43
@cla-bot cla-bot bot added the cla-signed label May 22, 2025
Copy link

coderabbitai bot commented May 22, 2025

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@finestructure
Copy link
Member

Looks great! Just a tiny nit - has something about the branch icon baselines changed? They seem a little better aligned in the existing version (dark mode version):

CleanShot 2025-05-22 at 23 08 12@2x
CleanShot 2025-05-22 at 23 07 52@2x

@daveverwer
Copy link
Member Author

@coderabbitai please review

@daveverwer
Copy link
Member Author

Looks great! Just a tiny nit - has something about the branch icon baselines changed? They seem a little better aligned in the existing version (dark mode version):

CleanShot 2025-05-22 at 23 08 12@2x CleanShot 2025-05-22 at 23 07 52@2x

Fixed:

Screenshot 2025-05-23 at 08 51 38@2x

Copy link

coderabbitai bot commented May 23, 2025

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch the PR details
gh pr view 3807 --json title,body,changedFiles,additions,deletions,files

# Get the list of files changed in this PR
gh pr view 3807 --json files -q '.files[].path'

Length of output: 6671


🏁 Script executed:

#!/bin/bash
# Let's examine the SCSS files related to matrix styling
echo "Examining FrontEnd/styles/matrix.scss changes"
git diff HEAD^ HEAD -- FrontEnd/styles/matrix.scss

# Let's also look at build_results.scss since it's a new file with many additions
echo "Examining FrontEnd/styles/build_results.scss (new file)"
cat FrontEnd/styles/build_results.scss

# Checking the Swift files for context
echo "Examining Swift file changes"
git diff HEAD^ HEAD -- Sources/App/Views/PackageController/PackageShow.swift

Length of output: 4384


🏁 Script executed:

#!/bin/bash
# Since we're in a PR review environment, let's examine the files directly without using git diff

# Let's look at the matrix.scss file
echo "Examining FrontEnd/styles/matrix.scss"
cat FrontEnd/styles/matrix.scss

# Looking at SVG icons that might be related to branch icons
echo "Looking for branch icon SVGs or CSS definitions"
find FrontEnd -type f -name "*.svg" | grep -i branch || echo "No branch SVG files found"

# Check CSS variables for icons
echo "Checking CSS variables for icons"
grep -r "image-build" FrontEnd/styles/

# Check Swift files for matrix rendering
echo "Examining PackageShow.swift"
cat Sources/App/Views/PackageController/PackageShow.swift | grep -A 20 -B 20 "matrix\|compatibility"

Length of output: 5225


🏁 Script executed:

#!/bin/bash
# Let's look at the build_results.scss file more carefully, focusing on alignment properties
echo "Examining icon alignment in build_results.scss"
grep -A 5 -B 5 "background-position\|align" FrontEnd/styles/build_results.scss

# Let's also look at the new CSS for compatibility matrix states
echo "Checking CSS for compatibility matrix states"
grep -A 10 -B 2 "succeeded\|failed" FrontEnd/styles/build_results.scss

# Let's examine the images.scss file to see icon definitions
echo "Examining images.scss for icon definitions"
cat FrontEnd/styles/images.scss | grep -A 3 -B 3 "image-build"

# Let's look at PackageShow.swift to understand the matrix rendering
echo "Checking matrix rendering in PackageShow.swift"
cat Sources/App/Views/PackageController/PackageShow.swift | head -200

Length of output: 16189


@daveverwer I've analyzed PR #3807 which redesigns the compatibility matrix for new platforms. Here's my review:

This is a substantial redesign that consolidates the compatibility matrix view to save vertical space by moving platform and Swift version names into the cells. The PR includes many SCSS changes and template updates to support this new design.

Regarding the issue mentioned by finestructure about branch icon alignment - I can confirm there appears to be a minor visual issue with the vertical alignment of branch icons in dark mode. The icon appears to have a slightly different baseline alignment compared to the current version.

This is likely due to CSS positioning differences in the new design. You may want to check the background-position property for elements using the branch icon class. Adjusting the vertical positioning by 1-2px should resolve the alignment issue to match the previous version's baseline.

Overall, the matrix redesign looks good, with this small alignment issue being the only visual concern.

@daveverwer
Copy link
Member Author

I went with this version in the end:

Screenshot 2025-05-22 at 17 43 55@2x

The "(Pending)" felt awkward and the information is available immediately and clearly displayed as soon as anyone clicks anywhere in the matrix.

@daveverwer daveverwer marked this pull request as ready for review May 23, 2025 08:04
@daveverwer daveverwer marked this pull request as draft May 23, 2025 08:09
@finestructure
Copy link
Member

finestructure commented May 23, 2025

Mmm, in this latest version the baselines look slightly off again/still?

CleanShot 2025-05-23 at 11 29 13@2x

@daveverwer
Copy link
Member Author

Mmm, in this latest version the baselines look slightly off again/still?

What package was this? They look good to me across several test packages:

Screenshot 2025-05-26 at 12 05 19@2x

Screenshot 2025-05-26 at 12 06 14@2x

@daveverwer daveverwer marked this pull request as ready for review May 26, 2025 13:19
@daveverwer daveverwer enabled auto-merge May 26, 2025 13:19
@daveverwer daveverwer merged commit 962fb7d into main May 26, 2025
7 of 8 checks passed
@daveverwer daveverwer deleted the matrix-redesign branch May 26, 2025 13:26
@finestructure
Copy link
Member

It was from your own screenshot above actually

@finestructure
Copy link
Member

Where you said “I went with his instead”, but perhaps that wasn’t the latest version?

@daveverwer
Copy link
Member Author

It was from your own screenshot above actually

Ah, that was to demonstrate the layout I went with and didn't have the other fix applied.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants